<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>登陆</title>
    <link rel="stylesheet" href="/public/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/public/validatr/css/bootstrapValidator.css">
    <link rel="stylesheet" href="/css/register.css">
    <script src="/public/jquery/jquery.js"></script>
    <script src="/public/bootstrap/js/bootstrap.js"></script>
    <script src="/public/validatr/js/bootstrapValidator.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <div class="page-header">
                    <h2>用户注册</h2>
                </div>
                <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
                    <div class="form-group">
                        <label class="col-lg-3 control-label">姓名</label>
                        <div class="col-lg-5">
                            <input type="text" class="form-control" name="username" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label">密码</label>
                        <div class="col-lg-5">
                            <input type="password" class="form-control" name="password" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label">请重复输入密码</label>
                        <div class="col-lg-5">
                            <input type="password" class="form-control" name="confirmPassword" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-9 col-lg-offset-3">
                            <button type="submit" class="btn btn-primary" name="signup" value="Sign up">立即注册</button>
                            <button type="submit" class="btn btn-primary" name="signup2" value="Sign up 2">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#defaultForm').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    username: {
                        message: 'The username is not valid',
                        validators: {
                            notEmpty: {},
                            stringLength: {
                                min: 6,
                                max: 20
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_\.]+$/
                            },
                            remote: {
                                url: 'remote.php',
                                message: 'The username is not available'
                            },
                            different: {
                                field: 'password',
                                message: 'The username and password cannot be the same as each other'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {},
                            identical: {
                                field: 'confirmPassword',
                                message: 'The password and its confirm are not the same'
                            },
                            different: {
                                field: 'username',
                                message: 'The password cannot be the same as username'
                            }
                        }
                    },
                    confirmPassword: {
                        validators: {
                            notEmpty: {},
                            identical: {
                                field: 'password'
                            },
                            different: {
                                field: 'username',
                                message: 'The password cannot be the same as username'
                            }
                        }
                    },
                    age: {
                        validators: {
                            notEmpty: {},
                            digits: {},
                            greaterThan: {
                                value: 18
                            },
                            lessThan: {
                                value: 100
                            }
                        }
                    },
                    website: {
                        validators: {
                            notEmpty: {},
                            uri: {}
                        }
                    },
                    phoneNumber: {
                        validators: {
                            notEmpty: {},
                            digits: {},
                            phone: {
                                country: 'US'
                            }
                        }
                    },
                    gender: {
                        validators: {
                            notEmpty: {}
                        }
                    },
                    'languages[]': {
                        validators: {
                            notEmpty: {}
                        }
                    },
                    'programs[]': {
                        validators: {
                            choice: {
                                min: 2,
                                max: 4
                            }
                        }
                    }
                }
            });
        });
    </script>
</body>

</html>